<template>
    <div class="hotel_main">
        <div class="hotel_container">
            <div class="hotel_box flexbox">
                <div class="hotel_img">
                    <el-image v-for="url in detailsInfo.img_list" :key="url" :src="url" lazy></el-image>
                </div>
                <div class="hotel_info">
                    <div class="hotel_title">{{detailsInfo.title}}</div>
                    <div class="hotel_contract">
                        <div class="hotel_region">地址:{{detailsInfo.location}}</div>
                        <div class="hotel_phone">联系电话:{{detailsInfo.mobile}}</div>
                        <div class="hotel_phone">原地址:<el-link type="primary" :href="detailsInfo.old_url" target="_blank">链接</el-link>
                        </div>
                        <el-button type="primary" class="back_btn" @click="$router.go(-1)">返 回</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            detailsInfo: {},
        };
    },
    created() {
        this.getDataList();
    },
    methods: {
        async getDataList() {
            const { data: res } = await this.$http.post(
                "http://47.119.175.47:4450/api/get_detail",
                {
                    product_id: this.$route.query.id,
                },
                {
                    headers: {
                        "content-type": "application/x-www-form-urlencoded",
                    },
                }
            );
            if (res.code !== 200) {
                this.disabled = false;
                this.$message.error(res.msg);
            } else {
                this.detailsInfo = res.data;
                this.detailsInfo.img_list = JSON.parse(res.data.img_list);
            }
        },
    },
};
</script>

<style scoped>
.hotel_main {
    overflow: auto;
    height: 100%;
}

.hotel_img .el-image {
    display: block;
    width: 100%;
    /* min-height: 200px; */
    margin-bottom: 10px;
}
.hotel_container {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}
.hotel_box {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    height: 100%;
}
.hotel_img {
    width: 700px;
    height: 100%;
    overflow: auto;
}
.img_item {
    display: block;
    width: 100%;
}
.red {
    color: #ff4d6a;
    font-weight: bold;
}
.hotel_info {
    margin-left: 25px;
    flex: 1;
    position: relative;
}
.hotel_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    line-height: 24px;
}
.hotel_contract {
    margin-top: 20px;
    font-size: 14px;
    line-height: 30px;
}
.back_btn {
    margin-top: 20px;
}
</style>
